<template>
    <ion-page>
        <ion-header>
            <ion-toolbar color="primary">
                <ion-buttons slot="start" @click="closePage()">
                    <ion-icon class="close_icon" :icon="close"></ion-icon>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <!--<ion-slides  @swiper="setSwiperInstance" pager="true" :options="slideOpts" @ionSlideTransitionStart="start($event)">
                <ion-slide v-for="(item, index) in pictures" :key="index">
                    <div class="img-title">{{item.title}}</div>
                    <div class="img-box" :style="{'max-height': maxHeight}">
                    <img :src="item.imageSavePath" :style="{'max-height': maxHeight}"  v-if="!item.imageType || (item.imageType!=='mp4' && item.imageType!=='mp3')">
                    <video :style="{'width': videoWidth + 'px'}" poster="assets/img/play.png" :data-index="index" :src="item.imageSavePath" loop="loop" controls="controls" v-if="item.imageType && item.imageType==='mp4'"  controlsList="nodownload noplaybackrate  noplaybackrate"></video>
                    <div :style="{'width': videoWidth * 0.9 + 'px'}" style="background: #fff;margin: 0px auto;padding: 5px;padding-bottom: 10px;" v-if="item.imageType && item.imageType==='mp3'">
                        <p style="color: #333;text-align: left;margin-bottom: 0px;">{{item.imageName}}</p>
                        <audio :src="item.imageSavePath" controls="controls" :data-index="index"></audio>
                        <div class="bar">
                        <div>
                        </div>
                        <div>
                            <ion-progress-bar color="secondary" :value="item.progress"></ion-progress-bar>
                        </div>
                        </div>
                    </div>
                    </div>
                </ion-slide>
            </ion-slides>-->
            <div class="swiper" :style="{'min-height': maxHeight +'px'}"> 
                <div class="swiper-wrapper" :style="{'min-height': maxHeight}">
                    <div class="swiper-slide" v-for="(item, index) in pictures" :key="index" :style="{'min-height': maxHeight +'px'}">
                        <div class="img-title">{{item.title}}</div>
                        <div class="img-box" :style="{'max-height': maxHeight +'px'}">
                        <img class="imgFile" :src="item.imageSavePath" v-if="!item.imageType || (item.imageType!=='mp4' && item.imageType!=='mp3')">
                        <video :style="{'width': videoWidth + 'px'}" poster="assets/img/play.png" :data-index="index" :src="item.imageSavePath" loop="loop" controls="controls" v-if="item.imageType && item.imageType==='mp4'"  controlsList="nodownload noplaybackrate  noplaybackrate"></video>
                        <div :style="{'width': videoWidth * 0.9 + 'px'}" style="background: #fff;margin: 0px auto;padding: 5px;padding-bottom: 10px;" v-if="item.imageType && item.imageType==='mp3'">
                            <p style="color: #333;text-align: left;margin-bottom: 0px;">{{item.imageName}}</p>
                            <audio :src="item.imageSavePath" controls="controls" :data-index="index"></audio>
                            <div class="bar">
                            <div>
                            </div>
                            <div>
                                <ion-progress-bar color="secondary" :value="item.progress"></ion-progress-bar>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </ion-content>
    </ion-page>
</template> 

<script lang="ts">
import { toRefs, ref, watch, onMounted, reactive  } from 'vue';
import { IonPage, IonHeader, IonicSlides, IonIcon, IonProgressBar, modalController, IonToolbar, IonButtons, IonContent} from '@ionic/vue';
import { close, caretForwardCircleOutline, pauseCircleOutline, arrowDownOutline } from "ionicons/icons";
import { NativeService } from '@/utils/native-service';
import Swiper from 'swiper';
export default {
  components: { IonPage, IonHeader,IonIcon, IonProgressBar, IonToolbar, IonButtons, IonContent },
  name: 'thsEnlargeImage',
  props: {
    pictures: Array,
    initialSlide: Number
  },
    setup(props: any, context: any) { 
    const nativeService = new NativeService();
    const slides = ref();
    const setSwiperInstance = (swiper: any) => {
        slides.value = swiper;
    }
    const state = reactive({
        slides,
        pictures: props.pictures,
        slideOpts: {   // 滑动配置
            initialSlide: props.initialSlide || 0,
            speed: 400,
            observer: true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        },
        maxHeight: window.innerHeight,
        videoWidth: window.innerWidth,
        timer: null as any,
        mediaObject: null,
        playIndex: props.initialSlide || 0,
        showDownIcon: false
    });

    onMounted(() => {
        const swiper = new Swiper('.swiper', {
            initialSlide: props.initialSlide || 0,
            speed: 400,
            observer: true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, // 修改swiper的父元素时，自动初始化swiper
            pagination: {
                el: '.swiper-pagination',
            },
        });
        // swiper.on('transitionStart', function (ev: any) {
        //     //...
        //     // console.log(swiper.activeIndex, 22);
        //     start({
        //         target: {
        //             swiper: {
        //                 activeIndex: swiper.activeIndex
        //             }
        //     }});
        // });
        // setSwiperInstance();
    });

        function start(ev: any) {
            console.log(ev)
        const index = ev.target.swiper.activeIndex;
        state.playIndex = index;
        // state.pictures[index].imageType = 'mp4';
        // if (state.pictures[index].imageType &&  state.pictures[index].imageType === 'mp4') {
        //     state.showDownIcon = true;
        // } else {
        //     state.showDownIcon = false;
        //     state.playIndex = -1;
        // }
        const videos = document.querySelectorAll('video');
        const len = videos.length;
        const audio = document.querySelectorAll('audio');
        const audioLen = audio.length;
        state.timer && (clearInterval(state.timer));
        state.timer = null;
        for (let i = 0; i < len; i++){
            videos[i].pause();
            videos[i].currentTime = 0;
            if (videos[i].dataset.index === index + ''){
                videos[i].play();
                // state.playIndex = i;
            }
        }
        for (let i = 0; i < audioLen; i++){
            audio[i].pause();
            audio[i].currentTime = 0;
            // console.log(audio[i].dataset.index);
            if (audio[i].dataset.index === index + ''){
                audio[i].play();
                // state.playIndex = i;
                state.pictures[index].isplay = true;
                setTimeout(() => {
                    // console.log(audio[i].duration);
                    state.pictures[index].duration = Math.ceil(audio[i].duration);
                    state.timer = setInterval(() => { 
                    state.pictures[index].progress = Math.ceil(audio[i].currentTime) / state.pictures[index].duration;
                    if(state.pictures[index].progress === 1){
                        state.pictures[index].isplay = false;
                    }
                    }, 10);
                }, 200);
            }
        }
    }

    /**
    * 关闭当前页面
    */
    function closePage() {
        modalController.dismiss();
    }

    /**
    * 视频播放
    * @param src 播放地址
    */
    function play(src: string){
        console.log(src);
        // state.cameraService.play(src);
    }
    const downVideo = () => {
        // nativeService.fileDown(state.pictures[state.playIndex].imageSavePath, state.pictures[state.playIndex].fileAliasName, true);
        nativeService.createBrowser(state.pictures[state.playIndex].imageSavePath);
    }
    return {
      ...toRefs(state),
      close,
      caretForwardCircleOutline,
      pauseCircleOutline,
      start,
      closePage,
        setSwiperInstance,
        arrowDownOutline,
        downVideo
    };
  }
}
</script>

<style lang='scss'>
  .close_icon{
      font-size: 24px;
  }
  .swiper-slide {
    height: 100%;
    width: 100%;
    --bullet-background-active: #fff;

    .swiper-slide {
        position: relative;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        .img-title {
            position: absolute;
            margin: 0 auto;
            top: 18px;
            z-index: 999;
            font-size: 16px;
            font-weight: bold;
            color: #999;
        }
        .img-note{
            position: absolute;
            margin: 0 auto;
            bottom: 40px;
            z-index: 999;
        }
        img {
            border-radius: 3px;
            width: 100%;
        }

        p {
            font-size: 14px;
            color: #fff;
        }
        video{
            width: 100%;
            max-width: 100%;
            height: auto;
            max-height: 100%;
        }
        .img-box{
            position: relative;
            img.play{
                position: absolute;
                width: 30px;
            }
        }
    }
}

.close-imgs {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 999;
    font-size: 22px;
    color: #fff;
}

//全屏按钮
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {

}
//进度条
video::-webkit-media-controls-timeline {
    // display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
    // display: none;            
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
    // display: none;            
}
//音量按钮
video::-webkit-media-controls-mute-button {
    // display: none;            
}
video::-webkit-media-controls-toggle-closed-captions-button {
    // display: none;            
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
    // display: none;            
}
//所有控件
video::-webkit-media-controls-enclosure{ 
    margin-bottom: 60px; // 调整距离底部的距离
}
// 控件面板
video::-webkit-media-controls-panel{ 
    background: transparent;
}
.swiper-container {
    // position: absolute;
    // left:50%;
    // top: 50%;
    // transform: translateX(-50%) translateY(-50%);
    // --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #fff;/* 两种都可以 */
}
ion-progress-bar {
    // --background: #ccc;
    // --progress-background: #fff;
    position: relative;
    top: 11px;
    height: 5px;
}
.play {
    font-size: 26px;
}
.bar{
    display: flex;
    div:first-child{
        width: 30px;
    }
    div:last-child{
        flex: 1;
    }
}
audio{
    width: 0px;
    height: 0px;
    opacity: 0;
}
.swiper-pagination{
    bottom: 10px;
}
.swiper-pagination-bullet-active{
    background:  #3880ff !important;
}
.imgFile{
    width: 100% !important;
}
</style>